<template>
	<view class="contractAll">
		<view class="contractLeft" :class="imgType === 'icon'?'contractLeftIcon':'contractLeftImg'" :style="'background-image:url('+(info.cover?info.cover:imgPath)+')'"></view>
		<view class="contractRight">
			<view class="contractText">
				<view class="contractName">
					<text>{{info.title}}</text>
				</view>
				<view class="contractAuth">
					<text>{{info.username}}</text>
				</view>
				<view class="fileDate">
					<view class="fileDateLeft">
						<image mode="aspectFill" class="fileDateLeftIcon" :src="IconPath"></image>
						<text>{{info.views}}</text>
					</view>
					<view class="fileDateRight">
						<text>{{formatTime(info.create_time, 'Y-M-D h:m')}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { formatTime } from '@/utils/tools.js'
	export default {
		props: {
			info: Object, // 文件信息
			imgType: String,
		},
		data() {
			return {
				IconPath: require('../../static/index/eye.png'),
				imgPath: require('../../static/report/foodReport.png')
			};
		},
		methods: {
			formatTime,
			downFile() {
				console.log('下载')
				// uni.downloadFile({
				// 	url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			console.log('下载成功');
				// 		}
				// 	}
				// });
			}
		}
	}
</script>

<style scoped>
	.contractAll {
		/* width: 100%; */
		height: 100%;
		padding: 10.66upx;
		display: flex;
		flex-wrap: nowrap;
		background-color: #fdf5f3;
		border-radius: 10upx;
		background-color: #FFF;
		box-sizing: border-box;
	}

	.contractLeft {
		background-color: #ffc8c7;
		height: 100%;
		width: 38%;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 15upx;
	}
	.contractLeftIcon{
		background-size: 60%;
	}
	.contractLeftImg{
		background-size: cover;
	}

	.contractRight {
		overflow: hidden;
		position: relative;
		padding-left: 18upx;
		width: 62%;
	}

	.contractText {
		width: 100%;
		height: 100%;
		font-size: 20upx;
		color: #666666;
	}
	.contractName{
		font-size: 32upx;
		color:#333333;
		font-weight: bold;
	}
	.contractAuth{
		font-size: 32upx;
	}
	.contractText text {
		display: inline-block;
		margin-bottom: 3upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width:100%;
	}
	.fileDate{
		bottom:0;
		position: absolute;
		overflow: hidden;
		width:96%;
		font-size: 20upx;
	}
	.fileDateLeft{
		float: left;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.fileDateLeftIcon{
		width:50upx;
		height:20upx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		vertical-align: middle;
		margin-top: 7upx;
		margin-right: 7upx;
	}
	.fileDateRight{
		float: right;
	}
</style>
